<!--
 * @Author: shuai
 * @Date: 2023-03-28 16:51:10
 * @LastEditors: shuai
 * @LastEditTime: 2023-03-30 09:11:26
 * @Description: file content
-->
<template>
  <Tettgen-echarts-com :option = option style="width: 100%;height: 400px;" ></Tettgen-echarts-com>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import getData from './data2'
// echarts基础设置，例如标题，坐标轴等
const option = reactive(
  {
    // title: {
    //   text: 'ECharts 堆叠柱状图'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category'
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ]
  })
// 动态获取数据
getData().then(data => {
  Object.assign(option, {
    dataset: { source: data },

    series: [
      {
        name: 'Direct',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal'
        }
      },
      {
        name: '邮件',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal2'
        }
      },
      {
        name: 'Union Ads',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal3'
        }
      },
      {
        name: 'Video Ads',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal4'
        }
      },
      {
        name: 'Search Engine',
        type: 'bar',
        encode: {
          x: 'xVal',
          y: 'yVal5'
        },
        emphasis: {
          focus: 'series'
        },
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [[{ type: 'min' }, { type: 'max' }]]
        }
      },
      {
        name: 'Baidu',
        type: 'bar',
        barWidth: 5,
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal6'
        }
      },
      {
        name: 'Google',
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal7'
        }
      },
      {
        name: 'Bing',
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal8'
        }
      },
      {
        name: 'Others',
        type: 'bar',
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        encode: {
          x: 'xVal',
          y: 'yVal9'
        }
      }
    ]
  })
})
</script>

<style scoped lang="scss">

</style>
